<template>
  <div>
    <div class="replay" v-for="(replay, index) in item" :key="replay.commentId">
    <div class="Re-header" @click=goHisXinxi(index)>
        <img :src=replay.commentAvatar>
        <span class="name">{{ replay.commentNickname }}</span> 
    </div>
    <div class="Re-middle">
        <span>{{ replay.commentContent }} <br> </span>
        <p>{{ replay.commentTime }}</p>
    </div>
  </div>
  </div>
</template>

<script>
export default {
    props: {
    item: {
      type: Array,
      default: () => {
        return {}
      },
    }
  },
  methods:{
    goHisXinxi(index){
          const param1 = this.item[index].userId; 
          console.log('跳转到信息页传的数据',param1);
          this.$router.push({
          name: 'hisxinxi',
          params: {
            param1: param1,
        }
      });
        }
  }
}
</script>

<style lang="less" scoped>

.replay{
  display: inline-block;
  width: 94%;
  background-color: #f9f5f5;
  margin-left: 14px;
  border-radius: 10px;
  display: flex;
    flex-direction: column;
    hr{
        width: 90%;
        margin-top: 10px;
        margin-left: 20px;
    }
  margin-top: 20px
 }
 .Re-header{
    width: 100%;
    img{
        width: 40px;
        height: 40px;
        border-radius: 40px;
        margin-left: 10px;
        margin-bottom: -10px;
    }
    .name{
        font-size: 17px;
        position: relative;
        left: 5%;
    }
 }
 .Re-middle{
    width: 100%;
    h2{
       margin-left: 35px;
       margin-top: 15px;
    }
    span{
        margin-left: 35px;
        font-size: 15px;
        display: inline-block;
        width: 240px;
        // height: 20px;
        word-break: break-all;
    }
    p{
        margin-left: 290px;
        font-size: 11px;
        color: #636262;
    }
    img{
      width: 50px;
      height: 50px;
      margin-left: 3px;
    width: 17.33333vw;
    height: 16.33333vw;
    border-radius: 10px;
    }
  span{
    margin-top: 10px;
  }
 }


</style>